import React, { Component } from "react";
import "../assets/css/Main.css";
import login from "../hooks/loginInfo";
import CommodityCard from "../components/CommodityCard";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper.min.css";
import SwiperCore, { Autoplay } from "swiper";

import Loading from "../components/Loading";


SwiperCore.use(Autoplay);

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      token: "",
      userName: null,
      banner: null,
      HotRecommend: null,
      searchText: "",
    };
    this.hello = this.hello.bind(this);
    this.ChangeInput = this.ChangeInput.bind(this);
    this.search = this.search.bind(this);
    this.ToDetail = this.ToDetail.bind(this);
  }

  ToDetail(pid) {
    this.props.history.push("/commodityDetail/" + pid);
  }

  ChangeInput(e) {
    this.setState({
      searchText: e.target.value,
    });
  }
  search(e) {
    if (e.keyCode === 13) {
      this.props.history.push("/searchResult/" + this.state.searchText);
    }
  }
  componentWillMount() {
    var loginInfo = login();
    if (loginInfo.isLogin) {
      this.$axios
        .get("/findMy", {
          params: {
            tokenString: loginInfo.token,
          },
        })
        .then((res) => {
          this.setState({
            token: loginInfo.token,
            userName: res.data.result[0].nickName,
          });
        });
    } else {
      localStorage.setItem("ToLoginPage", JSON.stringify({ path: "/cart" }));
    }
    this.$axios.get("/banner").then((res) => {
      this.setState({
        banner: res.data.result,
      });
    });
    this.$axios
      .get("/typeProducts", {
        params: {
          key: "isHot",
          value: 1,
        },
      })
      .then((res) => {
        this.setState({
          HotRecommend: res.data.result,
        });
      });
  }

  hello() {
    var date = new Date().getHours();
    if (date > 18) {
      return "晚上好，" + this.state.userName;
    } else if (date > 12) {
      return "下午好，" + this.state.userName;
    } else if (date > 0) {
      return "早上好，" + this.state.userName;
    }
  }

  render() {
    return (
      <div className="Main">
        <div className="main_header">
          <div className="main_hello">
            {this.state.token ? (
              this.hello()
            ) : (
              <span onClick={() => this.props.history.push("/login")}>
                请登录账号
              </span>
            )}
          </div>
          <div className="main_search">
            <i></i>
            <input
              value={this.state.searchText}
              onKeyUp={this.search}
              onChange={this.ChangeInput}
              type="text"
              placeholder="请输入商品名称"
            />
          </div>
        </div>
        {this.state.banner && this.state.HotRecommend ? (
          <React.Fragment>
            {this.state.banner && (
              <div className="main_banner">
                <Swiper autoplay={{ disableOnInteraction: false }} loop={true}>
                  {this.state.banner.map((item) => {
                    return (
                      <SwiperSlide key={item.pid}>
                        <img
                          src={item.bannerImg}
                          alt=""
                          onClick={() => this.ToDetail(item.pid)}
                        />
                        <span>{item.name}</span>
                      </SwiperSlide>
                    );
                  })}
                </Swiper>
              </div>
            )}
            {this.state.HotRecommend && (
              <div className="main_HotRecommend">
                <div className="HotRecommend_title">热门推荐</div>
                <ul className="HotRecommend_list">
                  {this.state.HotRecommend.map((item) => {
                    return (
                      <CommodityCard key={item.id} item={item}></CommodityCard>
                    );
                  })}
                </ul>
              </div>
            )}
          </React.Fragment>
        ) : (
          <Loading></Loading>
        )}
      </div>
    );
  }
}

export default Main;
